<template>
  <ContentWrap style="font-size: 14px" v-if="setServer === 'list'">
    <div
      style="
        display: flex;
        margin-bottom: 16px;
        align-items: center;
        justify-content: space-between;
      "
    >
      <div class="flex">
        <span
          v-for="(item, index) in ListTitle"
          :class="tabs1 == index ? 'tabStyleActive' : 'tabStyle'"
          :key="index"
          @click="tabs(item, index)"
          >{{ item }}
        </span>
      </div>
      <el-input
        v-model="queryParam.referenceLocation"
        placeholder="请输入地震事件"
        :suffix-icon="Search"
        style="width: 240px; height: 40px; border-radius: 5px; border: 1px solid #ccc"
      />
    </div>
    <ContentWrap :styleParams="styleParams">
      <div class="flex items-center justify-between">
        <span class="titleFont">查询条件</span>
        <span style="color: #1b91ff; cursor: pointer; margin-bottom: 15px" @click="arrow = !arrow"
          >折叠<el-icon v-if="arrow"><ArrowUp /></el-icon><el-icon v-else><ArrowDown /></el-icon
        ></span>
      </div>
      <el-form :model="queryParam" label-width="auto" v-show="arrow">
        <el-form-item label="区域">
          <el-radio-group v-model="queryParam.area">
            <el-radio-button v-for="item in top1List" :label="item.label" :value="item.value" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="省份" v-if="queryParam.area == 1">
          <el-radio-group v-model="queryParam.proCode">
            <el-radio v-for="item in top4List" :label="item.name" :value="item.code" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="震级">
          <el-radio-group v-model="queryParam.magnitudeType">
            <el-radio-button v-for="item in top2List" :label="item.label" :value="item.value" />
          </el-radio-group>
          <template v-if="queryParam.magnitudeType == 5">
            <div class="MagnitudeInput">
              <el-input
                v-model="queryParam.stat"
                :precision="1"
                :min="0"
                placeholder="请输入震级"
              />
              <span style="margin: 0 5px">-</span>
              <el-input
                v-model.number="queryParam.end"
                :precision="1"
                :min="0"
                controls-position="right"
                placeholder="请输入震级"
              />
              <el-icon class="searchIcon"><Search /></el-icon>
            </div>
          </template>
        </el-form-item>
        <el-form-item label="时间" class="flex items-center" style="height: 40px">
          <el-radio-group v-model="queryParam.timeType">
            <el-radio-button v-for="item in top3List" :label="item.label" :value="item.value" />
          </el-radio-group>
          <div
            v-if="queryParam.timeType == 5"
            style="width: 256px; height: 32px; display: inline-block; margin-left: 20px"
          >
            <el-date-picker
              v-model="queryParam.time"
              value-format="YYYY-MM-DD"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 200px"
              :clearable="false"
            />
          </div>
        </el-form-item>
      </el-form>
    </ContentWrap>
    <div class="flex items-center justify-between">
      <span class="titleFont mt-10px">地震事件列表</span>
      <el-button type="primary" @click="trigger">地震触发</el-button>
    </div>

    <el-table :load="loading" :data="tableData" header-cell-class-name="custom-header" stripe>
      <el-table-column prop="earthquakeMagnitude" label="震级(M)" align="center" />
      <el-table-column prop="earthquakeTime" label="发震时刻(UTC-8)" align="center" width="220" />
      <el-table-column prop="longitude" label="经度(°)" align="center" />
      <el-table-column prop="latitude" label="纬度(°)" align="center" />
      <el-table-column prop="depth" label="震源深度(千米)" align="center" />
      <el-table-column
        prop="referenceLocation"
        label="参考位置"
        align="center"
        width="400"
        show-overflow-tooltip
      />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <div class="flex items-center justify-center">
            <el-button type="primary" link @click="openForm(scope.row)"> 查看 </el-button>
            <el-dropdown
              @command="(command) => handleCommand(command, scope.row)"
              v-hasPermi="['earthquakeData:delete']"
              v-if="tabs1 == 1 || tabs1 == 2"
            >
              <el-button type="primary" link> 更多  <Icon icon="ep:d-arrow-right" /></el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="handleDelete"> 删除 </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="国家地震产品平台" align="center" v-if="tabs1 == 0" width="150">
        <template #default="scope">
          <div class="flex items-center justify-center">
            <el-button type="primary" link @click="getGJDZCPPT(scope.row.id)"> 获取 </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      v-model:limit="queryParamPage.pageSize"
      v-model:page="queryParamPage.pageNo"
      :total="total"
      @pagination="tableList"
    />
    <el-dialog v-model="dialogVisible" width="700">
      <h2 style="color: #000; font-size: 24px">获取结果</h2>
      <div style="width: 600px; font-size: 18px; display: flex">
        <div>
          <el-icon style="font-size: 26px; color: #55c51e">
            <CircleCheck />
          </el-icon>
        </div>
        <div style="margin-left: 20px">
          成功获取
          <span
            v-for="(item, index) in getResult.successList"
            :key="index"
            style="color: #666666; font-weight: 700"
          >
            {{ item }}<span v-if="index < getResult.successList.length - 1">、 </span>
          </span>
          <span>{{ getResult.successList.length }}个产品</span>
        </div>
      </div>
      <div style="width: 600px; font-size: 18px; margin-top: 20px; display: flex">
        <div>
          <el-icon style="font-size: 26px; color: #1b91ff">
            <InfoFilled />
          </el-icon>
        </div>

        <div style="margin-left: 20px">
          未获取到
          <span
            v-for="(item, index) in getResult.errorList"
            :key="index"
            style="color: #666666; font-weight: 700"
          >
            {{ item }}<span v-if="index < getResult.errorList.length - 1">、 </span>
          </span>
          <span>{{ getResult.errorList.length }}个产品</span>
        </div>
      </div>
      <div style="width: 600px; margin-top: 100px; display: flex; justify-content: center"
        ><el-button type="primary" @click="close" text-align:center size="large">
          关闭
        </el-button></div
      >
    </el-dialog>
  </ContentWrap>
  <Trigger v-if="setServer === 'trigger'" @setClose="ServiceWorker"></Trigger>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElInput, ElButton } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import router from '@/router'
import * as earthquakeServerApi from '@/api/earthquake/earthquakeServer'
import { useRoute } from 'vue-router'
import Trigger from './trigger.vue'

const route = useRoute()
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const { currentRoute, push } = useRouter() // 路由
const arrow = ref(true)
const setServer = ref('list')

const ListTitle = ref(['正式地震', '测试地震', '演练地震', '自动地震'])
const top1List = ref([
  { label: '全国', value: 0 },
  { label: '国内', value: 1 },
  { label: '国外', value: 2 }
])
const top2List = ref([
  { label: '全部', value: 0 },
  { label: '3及以下', value: 1 },
  { label: '3-5级', value: 2 },
  { label: '5-7级', value: 3 },
  { label: '7级以上', value: 4 },
  { label: '自定义', value: 5 }
])
const top3List = ref([
  { label: '全部', value: 0 },
  { label: '最近24小时', value: 1 },
  { label: '最近一周', value: 2 },
  { label: '最近一个月', value: 3 },
  { label: '最近一年', value: 4 },
  { label: '自定义', value: 5 }
])
const top4List = ref([])
const dialogVisible = ref(false)
const getResult = ref([])
const loading = ref(false)
// 处理高亮效果
const tabs1 = ref(0)
const selectedItem0 = ref(0)
// 分页

const ServiceWorker = () => {
  setServer.value = 'list'
}

const total = ref(0)
const styleParams = {
  backgroundColor: '#F5F8FA',
  padding: '20px 20px 0px',
  border: '1px solid #F5F8FA',
  borderRadius: '8px'
}
const queryParam = ref({
  area: 0, //区域  0--全部  1--国内  2--国外
  magnitudeType: 0, //震级类型  0--全部  1--3级以下  2--3-5级  3--5-7级  4--7级以上  5--输入的震级
  stat: null, //震级开始
  end: null, //震级结束
  timeType: 0, //时间类型  0--全部  1--最近24小时  2--最近一周  3--最近一个月  4--最近一年  5--自定义的时间
  time: [],
  statTime: null, //开始时间
  endTime: null, //结束时间
  earthquakeType: 1, //地震类型  1--正式地震  2--测试地震  3--演练地震  4--自动地震, 手动触发默认是2 测试地震
  referenceLocation: '', //可以根据 震级、发震时刻、经度、纬度、震源深度、参考位置进行 模糊查询，这里用参考位置字段传参
  sorted: 0, // 0--倒序  1--正序
  proCode: 0 //省份Code编码
})
const queryParamPage = ref({
  pageSize: 10,
  pageNo: 1
})
const tableData = ref([])

/** 监听deptName */
watch(
  queryParam.value,
  (val) => {
    if (val.timeType == 5 && !val.time.length) {
      return
    }
    if (val.magnitudeType == 5 && (!val.stat || !val.end)) {
      return
    }
    queryParamPage.value.pageNo = 1
    tableList()
  },
  { deep: true }
)

/** 操作分发 */
const handleCommand = (command: string, row: earthquakeServerApi.EarthquakeVO) => {
  switch (command) {
    case 'handleDelete':
      handleDelete(row.id)
      break
    default:
      break
  }
}

// 列表
const tableList = async () => {
  loading.value = true
  const query = { ...queryParam.value, ...queryParamPage.value }
  if (queryParam.value.area != 1) {
    query.proCode = 0
  }
  if (queryParam.value.timeType == 5 && queryParam.value.time.length) {
    query.statTime = queryParam.value.time[0]
    query.endTime = queryParam.value.time[1]
  } else {
    query.statTime = null
    query.endTime = null
  }
  if (queryParam.value.magnitudeType != 5) {
    query.stat = null
    query.end = null
  }
  await earthquakeServerApi
    .formalEarthquake(query)
    .then((res) => {
      tableData.value = res.list
      total.value = res.total
      loading.value = false
    })
    .catch((err) => (loading.value = false))
}
const reset = () => {
  queryParam.value = {
    area: 0, //区域  0--全部  1--国内  2--国外
    magnitudeType: 0, //震级类型  0--全部  1--3级以下  2--3-5级  3--5-7级  4--7级以上  5--输入的震级
    stat: null, //震级开始
    end: null, //震级结束
    timeType: 0, //时间类型  0--全部  1--最近24小时  2--最近一周  3--最近一个月  4--最近一年  5--自定义的时间
    time: [],
    statTime: null, //开始时间
    endTime: null, //结束时间
    earthquakeType: 1, //地震类型  1--正式地震  2--测试地震  3--演练地震  4--自动地震, 手动触发默认是2 测试地震
    referenceLocation: '', //可以根据 震级、发震时刻、经度、纬度、震源深度、参考位置进行 模糊查询，这里用参考位置字段传参
    sorted: 0, // 0--倒序  1--正序
    proCode: 0 //省份Code编码
  }
}
// 切换
const tabs = async (item, idx) => {
  tabs1.value = idx
  queryParam.value.earthquakeType = idx + 1
}
// 区域
const selectByArea = () => {
  earthquakeServerApi.getCityList().then((res) => {
    res.unshift({ code: 0, name: '全国' })
    top4List.value = res
  })
}

// 跳转至地震触发
const trigger = () => {
  setServer.value = 'trigger'
}

//查看按钮
const openForm = (row) => {
  let id = row.id
  let earthquakeType = row.earthquakeType
  let divisionCode = row.divisionCode
  let createTime = row.createTime
  let earthquakeMagnitude = row.earthquakeMagnitude
  let longitude = row.longitude
  let latitude = row.latitude
  let depth = row.depth
  let referenceLocation = row.referenceLocation
  let earthquakeTime = row.earthquakeTime
  router.push({
    path: '/earthquake/viewpage',
    query: {
      id,
      earthquakeType,
      divisionCode,
      createTime,
      earthquakeMagnitude,
      longitude,
      latitude,
      depth,
      referenceLocation,
      earthquakeTime
    }
  })
}

//获取按钮
const getGJDZCPPT = async (id) => {
  await earthquakeServerApi.getGJDZCPPT(id).then((res) => {
    getResult.value = res
    dialogVisible.value = true
    console.log(getResult.value)
  })
}
// 弹窗关闭按钮
const close = () => {
  dialogVisible.value = false
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    let ids = []
    if (id !== 0) {
      ids.push(id)
      // 发起删除
      await earthquakeServerApi.deleteEarthquake(selectedItem0.value, ids)
      message.success(t('common.delSuccess'))
      await tableList(queryParam)
    }
  } catch {}
}

/**表单保存返回后重新加载列表 */

onMounted(() => {
  selectByArea()
  tableList()
})
</script>

<style scoped lang="scss">
.tabStyle {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 88px;
  height: 30px;
  padding: 4px 16px;
  margin-right: 8px;
  color: #666666;
}

.tabStyleActive {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 30px;
  border-radius: 32px;
  padding: 4px 16px;
  background: rgba(53, 96, 246, 0.1);
  margin-right: 8px;
  color: #1664ff;
}

.MagnitudeInput {
  width: 249px;
  height: 32px;
  display: inline-block;
  margin-left: 20px;
  border: 1px solid #d8d8d8;
  background: #fff;
}
.el-input {
  width: 100px;
  height: 30px;
  color: #d8d8d8;
  margin-bottom: 2px;
  :deep(.el-input__wrapper) {
    box-shadow: 0 0 0 0px;
    cursor: default;
    .el-input__inner {
      cursor: default !important;
    }
  }
}

.searchIcon {
  font-size: 20px;
  color: #4e5969;
  position: relative;
  top: 5px;
  left: 5px;
}

.titleFont {
  display: inline-block;
  font-size: 16px;
  color: #333;
  font-weight: 600;
  margin-bottom: 15px;
}

:deep(.custom-header) {
  background-color: #f2f3f5 !important;
  /* 设置表头背景色 */
  color: #333 !important;
  /* 设置表头文字颜色 */
  font-weight: bold !important;
  /* 设置表头文字加粗 */
  height: 42px;
}

.earthquake-event {
  padding: 20px 60px 20px 20px;
}

/* 左侧切换样式 */
.tabsStyle {
  background-color: rgba(64, 158, 255, 0.6);
  color: #1890ff;
}

.highlighted0 {
  background-color: #409eff;
  color: #fff;
  height: 40%;
  line-height: 40px;
  border-radius: 10px;
}

.highlighted1 {
  background-color: #409eff;
  color: #fff;
  height: 40%;
  line-height: 40px;
  border-radius: 10px;
}

.highlighted2 {
  background-color: #409eff;
  color: #fff;
  height: 40%;
  line-height: 40px;
  border-radius: 10px;
}

/* 使用::v-deep调整每一行的样式 */
::deep(.el-table) {
  .el-table__row {
    font-size: 16px;
    height: 40px;
    /* 设置每一行的高度 */
    line-height: 40px;
    /* 设置行内文本的垂直对齐 */
    color: #333333;
  }
}
</style>
